<template>
	<view class="benben-address-label">
		<view
			@click="handleLable(item.name)"
			v-for="(item, i) in labels"
			:key="i"
			:class="{ label_box: true, label_avtive: item.name == value }"
		>
			{{ item.name }}
		</view>
		<view
			v-if="isEdit"
			class="label_box edit_box"
		>
			<input
				:focus="true"
				maxlength="5"
				v-model.trim="editLabel"
				placeholder="请输入标签名称,最多5个字"
			/>
			<view
				v-if="editLabel"
				class="confirm_btn"
				@click="editConfirm"
			>确定</view>
			<view
				v-else
				class="cancel_btn"
				@click="editCancel"
			>取消</view>
		</view>
		<view
			v-else-if="!customLabel"
			@click="handlerEdit"
			class="label_box add_icon"
		></view>
		<view
			v-else
			@click="handleLable(customLabel)"
			:class="{ label_box: true, label_avtive: customLabel == value, custom_label: true }"
		>
			{{ customLabel }}
			<view
				class="edit-btn"
				@click.stop="handlerEdit"
			>编辑</view>
		</view>
	</view>
</template>
<script>
	import { API_VERSION } from '@/common/config.js'
	export default {
		name: 'benben-address-label',
		props: {
			api: {
				type: String,
				default: '6544d17096178',
			},
			value: {
				type: String,
				default: '',
			},
		},
		data() {
			return { labels: [], customLabel: '', isEdit: false, editLabel: '' }
		},
		computed: {
			labelApi() {
				return `/${API_VERSION}/${this.api}`
			},
			isShowAdd() {
				if (!this.value) true
				return !this.labels.includes(this.value) ? true : false
			},
		},
		created() {
			this.getLabels()
		},
		watch: {
			value: {
				handler(val) {
					if (!val) return
					if (!this.labels.length) return
					if (!this.labels.find((item) => item.name === val)) {
						this.customLabel = val
					}
				},
				immediate: true,
			},
			'labels.length': {
				handler(val) {
					if (!val) return
					if (!this.value) return
					if (!this.labels.find((item) => item.name === this.value)) {
						this.customLabel = this.value
					}
				},
			},
		},
		mounted() {},
		methods: {
			editCancel() {
				this.isEdit = false
			},
			editConfirm() {
				if (!this.editLabel.length) return this.$message.info('请输入标签名称')
				if (this.editLabel.length > 5) return this.$message.info('标签名称最多5个字')
				this.$emit('input', this.editLabel)
				this.$emit('change', this.editLabel)
				this.isEdit = false
			},
			handlerEdit() {
				this.isEdit = true
				this.editLabel = this.customLabel
			},
			handleLable(name) {
				this.isEdit = false
				this.$emit('input', name)
				this.$emit('change', name)
			},
			async getLabels() {
				try {
					let {
						data: { code, data, msg },
					} = await this.$api.post(this.labelApi)
					if (code != 1) return this.$message.info(msg)
					this.labels = data
				} catch (error) {
					console.log('error--------', error)
				}
			},
		},
	}
</script>

<style
	scoped
	lang="scss"
>
	.benben-address-label {
		display: flex;
		flex-wrap: wrap;
		flex: 1;
	}

	.label_box {
		flex-shrink: 0;
		border: 1px solid #e5e5e5;
		background: rgba(255, 255, 255, 0.39);
		border-radius: 8rpx;
		padding: 0 12rpx;
		font-size: 24rpx;
		color: #333;
		margin-right: 16rpx;
		margin-top: 8rpx;
		margin-bottom: 8rpx;
		height: 42rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&.label_avtive {
			background: #62889B;
			color: #fff;
		}

		&.custom_label {
			display: flex;
			padding-right: 0;
		}

		.edit-btn {
			margin-left: 15rpx;
			width: 60rpx;
			color: var(--edit-color);
			font-size: 20rpx;
			text-align: center;
			background: var(--edit-bg);
		}

		&.edit_box {
			display: flex;
			padding: 0;

			input {
				width: 300rpx;
				font-size: 20rpx;
				height: 42rpx;
				padding-left: 15rpx;
			}

			.cancel_btn {
				width: 80rpx;
				color: var(--cancel-color);
				font-size: 20rpx;
				text-align: center;
				background: var(--cancel-bg);
			}

			.confirm_btn {
				width: 80rpx;
				color: var(--confirm-color);
				font-size: 20rpx;
				text-align: center;
				background: var(--confirm-bg);
			}
		}
	}

	.add_icon {
		width: 58rpx;
		height: 42rpx;
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			content: '';
			width: 8px;
			height: 1px;
			background-color: #666;
		}

		&::after {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			content: '';
			height: 8px;
			width: 1px;
			background-color: #666;
		}
	}
</style>